<template>
  <van-card
      v-for="team in teamList"
      :desc="team.description"
      :title="`${team.name}`"
      :thumb="img"
  >
    <template #tags>
      <van-tag plain type="danger" style="margin-right: 8px; margin-top: 8px">
        {{
          teamStatusEnum[team.status]
        }}
      </van-tag>
    </template>
    <template #bottom>
      <div>
        {{ '加入人数: ' + +team.joinIdList.length + '/' + team.maxNum }}
      </div>
      <div v-if="team.expireTime">
        {{ '过期时间: ' + team.expireTime }}
      </div>
      <div>
        {{ '创建时间: ' + team.createTime }}
      </div>
    </template>
    <template #footer>
      <van-button v-if="!team.joinIdList?.includes(currentUser.id)" size="small" type="primary" plain
                  @click="doJoinTeam(team)">加入队伍
      </van-button>
      <van-button v-if="team.joinIdList?.includes(currentUser.id)" size="small" type="primary" plain
                  @click="quitTeam(team.id)">退出队伍
      </van-button>
      <van-button v-if="team.userId === currentUser.id" size="small" type="primary" plain @click="toEditTeam(team.id)">
        编辑队伍
      </van-button>
      <van-button v-if="team.userId === currentUser.id" size="small" type="primary" plain @click="doJoinTeam(team.id)">
        解散队伍
      </van-button>
    </template>
  </van-card>
  <van-dialog v-model:show="showDialog" title="请输入密码" show-cancel-button @confirm="joinTeam">
    <van-field
        v-model="password"
        type="password"
        name="password"
    />
  </van-dialog>
</template>

<script setup lang="ts">
import {TeamType} from "../models/team";
import {teamStatusEnum} from "../constants/teamStatusEnum.ts";
import {CurrentUser} from "../models/user";
import img from "../assets/img.png"
import requestApi from "../plugins/requestApi.ts";
import {showDialog, showSuccessToast} from "vant";
import {ref} from "vue";
import {useRouter} from "vue-router";

interface TeamCardListProps {
  teamList: TeamType[];
  currentUser: CurrentUser;
}

const showDialog = ref(false);
const teamId = ref(0);
const password = ref('');
const router = useRouter();
// 给父组件设置默认值，保证数据不为空
const props = withDefaults(defineProps<TeamCardListProps>(), {
  //@ts-ignore
  teamList: [] as TeamType[],
  currentUser: {} as CurrentUser
});
const joinTeam = async () => {
  const res = await requestApi.post('/team/join', {
    teamId: teamId.value,
    password: password.value
  })
  if (res) {
    showDialog.value = false;
    showSuccessToast('加入队伍成功');
  }else {
    showSuccessToast('加入队伍失败', res.description);
  }
  password.value = '';
}
const doJoinTeam = (team: TeamType) => {
  if (team.status === 1) {
    teamId.value = team.id;
    joinTeam();
  }
  if (team.status === 2) {
    showDialog.value = true;
    teamId.value = team.id;
  }
}
const quitTeam = async (teamId: number) => {
  const res = await requestApi.get( '/team/quit', {
    params: {
      teamId: teamId
    }
  })
  if (res) {
    showSuccessToast('退出队伍成功');
  }else {
    showSuccessToast('退出队伍失败', res.description);
  }
}
const toEditTeam = (teamId: number) => {
  router.push({
    path: '/team/edit',
    query: {
      teamId: teamId
    }
  })
}
</script>
<style scoped>
/* 标签颜色*/
.van-tag--danger.van-tag--plain {
  color: #002fff;
}
</style>